<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="OrcasThemes">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>注册 | 视频点播系统</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="css/screen.css">
    <link rel="stylesheet" href="css/animation.css">
    <!--[if IE 7]>
      
      <![endif]-->
    <link rel="stylesheet" href="css/font-awesome.css">
    <!--[if lt IE 8]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->
    <link href="css/lity.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.12.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/lity.js"></script>
</head>

<body>
    <div id="myapp">
        <!-- LOGIN -->
        <div id="login" class="container-fluid standard-bg">
            <!-- HEADER -->
            <div class="row header-top">
                <div class="col-lg-3 col-md-6 col-sm-5 col-xs-8">
                    <a class="main-logo" href="#"><img src="img/main-logo.png" class="main-logo img-responsive"
                            alt="Muvee Reviews" title="Muvee Reviews"></a>
                </div>
                <div class="col-lg-6 hidden-md text-center hidden-sm hidden-xs">

                </div>
                <!-- <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
                    <div class="right-box">
                        <button type="button" class="access-btn" data-toggle="modal"
                            data-target="#enquirypopup">新增视频</button>
                    </div>
                </div> -->
            </div>
            <!-- MENU -->
            <div class="row home-mega-menu ">
                <div class="col-md-12">
                    <nav class="navbar navbar-default">
                        <div class="navbar-header">
                            <button class="navbar-toggle" type="button" data-toggle="collapse"
                                data-target=".js-navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse js-navbar-collapse megabg dropshd ">
                            <ul class="nav navbar-nav">
                                <li><a href="index.html">视频点播</a></li>
                                <li><a href="login.html">登录</a></li>
                            </ul>
                            <div class="search-block">
                                <!-- <form method="get" action="/video"> -->
                                <!-- 阻止表单的默认策略，就不会请求/?s= -->
                                <form v-on:submit.prevent>
                                    <input type="search" name="s" placeholder="搜索视频"
                                        v-on:keydown.enter="search_videos($event.target.value);">
                                </form>
                            </div>
                        </div>
                        <!-- /.nav-collapse -->
                    </nav>
                </div>
            </div>
            <!-- LOGIN -->
            <div class="row">
                <div class="container">
                    <section class="registration col-lg-12 col-md-12">
                        <div class="addon-row secBg">
                            <div class="large-12 columns">
                                <div class="login-register-content">
                                </div>
                                <div class="col-md-5">
                                    <div class="register-form">
                                        <h2 class="title main-head-title">注册您的账户</h2>
                                        <form method="post" data-abide novalidate>
                                            <div class="input-group">
                                                <span class="fa fa-envelope login-inputicon"
                                                    style="color:rgb(116, 116, 116);  margin-left: -440px;"></span>
                                                <input style="color:rgb(0, 0, 0);" type="text" name="useremail"
                                                    placeholder="输入您的邮箱" required>
                                            </div>
                                            <div class="input-group">
                                                <span class="fa fa-user login-inputicon"
                                                    style="color:rgb(116, 116, 116);  margin-left: -440px;"></span>
                                                <input style="color:rgb(0, 0, 0);" type="text" name="username"
                                                    placeholder="输入您的用户名" required>
                                            </div>
                                            <div class="input-group">
                                                <span class="fa fa-photo login-inputicon"
                                                    style="color:rgb(116, 116, 116);  margin-left: -440px;"></span>
                                                <input type="file" class="custom-file-input" id="useravatar" name="useravatar" required>
                                            </div>
                                            <div class="input-group" id="password-group">
                                                <span class="fa fa-lock login-inputicon"
                                                    style="color:rgb(116, 116, 116);  margin-left: -440px;"></span>
                                                <input style="color:rgb(0, 0, 0);" type="password" name="password1"
                                                    id="password" placeholder="输入您的密码" required>
                                            </div>
                                            <div class="input-group" id="confirm-password-group">
                                                <span class="fa fa-lock login-inputicon"
                                                    style="color:rgb(116, 116, 116);  margin-left: -440px;"></span>
                                                <input style="color:rgb(0, 0, 0);" type="password" name="password2"
                                                    id="confirm-password" placeholder="确认您的密码" required>
                                            </div>
                                            <div class="email-verify-btn-box">
                                                <span class="fa fa-bars login-inputicon"
                                                style="color:rgb(116, 116, 116);  margin-left: -179px;"></span>
                                                <input style="color:rgb(0, 0, 0);" type="text" name="useremail_verify"
                                                    placeholder="邮箱验证码" required>
                                                <button class="send-email-btn" 
                                                    id="send-email-button" disabled>发送邮件</button>
                                            </div>
                                            <div class="login-btn-box">
                                                <button class="access-btn" type="submit" name="submit"
                                                    id="register-btn">注册</button>
                                            </div>
                                        </form>
                                        <p>已拥有账户？<a href="login.html" style="color: rgb(170, 170, 170);">返回登录界面</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
            <div class="clearfix spacer"></div>
            <div class="clearfix spacer"></div>
        </div>

        <!-- FOOTER -->
        <div id="footer" class="container-fluid footer-background">
            <div class="container">
                <footer>
                    <div class="row copyright-bottom text-center">
                        <div class="col-md-12 text-center">
                            <a href="" class="footer-logo" title="Video Magazine Bootstrap HTML5 template">
                                <img src="img/footer-logo.png" class="img-responsive text-center"
                                    alt="Video Magazine Bootstrap HTML5 template">
                            </a>
                            <!-- 视频点播系统的作者 -->
                            <!-- <p v-cloak>Copyright &copy; {{author}}</p> -->
                            <p>Copyright &copy</p>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</body>


<script>
    document.getElementById("confirm-password").addEventListener("input", validatePassword);

    function validatePassword() {
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirm-password").value;
        var registerButton = document.getElementById('register-btn');

        if (password !== confirmPassword) {
            // 密码不匹配，显示错误信息
            document.getElementById("confirm-password-group").classList.add("error");
            document.getElementById("confirm-password-group").classList.remove("success");
            registerButton.disabled = true; // 密码不匹配，禁用注册按钮
            registerButton.style.backgroundColor = 'gray';
        }
        else {
            // 密码匹配，移除错误信息
            document.getElementById("confirm-password-group").classList.remove("error");
            document.getElementById("confirm-password-group").classList.add("success");
            registerButton.disabled = false; // 密码匹配，注册按钮
            registerButton.style.backgroundColor = '';
        }
    }

    // 获取输入框和发送邮件按钮的元素
    const useremailInput = document.querySelector('input[name="useremail"]');
    const sendEmailButton = document.getElementById('send-email-button');

    // 监听useremail输入框的变化事件
    useremailInput.addEventListener('input', function () {
        if (useremailInput.value === ''){
            sendEmailButton.disabled = true;
            sendEmailButton.style.backgroundColor = 'gray';
        } else {
            sendEmailButton.disabled = false;
            sendEmailButton.style.backgroundColor = '';
        }
    });

    // 监听发送邮件按钮的点击事件
    sendEmailButton.addEventListener('click', function () {
        event.preventDefault(); // 阻止表单默认提交行为
        // 在这里执行发送邮件的相关逻辑
        const useremail = useremailInput.value.trim();

        // 使用正则表达式验证邮箱格式
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        const isValidEmail = emailRegex.test(useremail);

        if (!isValidEmail) {
            // 如果邮箱格式不正确，弹窗提示用户
            alert("请输入有效的邮箱地址");
            return;
        }
        
        // 发送请求到/usr/email/verify接口并处理响应
        fetch('/usr/email/verify', {
            method: 'POST',
            // "useremail": "邮箱"
            body: JSON.stringify({ useremail }),
            headers: { 'Content-Type': 'application/json' }
        })
            .then(response => response.json())
            .then(data => {
                // 处理接口返回的数据
                console.log(data);
            })
            .catch(error => {
                // 处理请求错误
                console.error(error);
            });
    });

</script>
<style>
    .error input {
        border-color: red;
        border-width: 3px;
    }

    .error .fa-lock {
        color: red;
        border-width: 3px;
    }
</style>

</html>